<template>
  <div class="settings-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="角色管理" name="role">
            <!-- 新增角色按钮 -->
            <!--   v-if="$checkPermission('point-add')"    -->
            <el-button
              type="primary"
              size="small"
              @click="showAddDialog = true"
            >
              <i class="el-icon-edit" />
              新增角色
            </el-button>
            <!-- 角色列表表格 -->
            <!-- el-table
                data: 数据源(对象数组)
                el-table-column:列
                prop:渲染对象指定key对应的值
                label: 渲染表头的名字
                width:单元格的宽度
                stripe:斑马纹-->
            <el-table :data="roleList" style="width: 100%" border>
              <el-table-column
                label="序号"
                width="180"
                type="index"
                :index="indexMethod"
              />
              <el-table-column prop="name" label="名称" width="180" />
              <el-table-column prop="description" label="描述" />
              <el-table-column prop="name" label="操作">
                <template #default="{ row }">
                  <el-button
                    type="success"
                    size="mini"
                    @click="handleOpenAssignDialog(row)"
                  >
                    <i class="el-icon-share" />
                    分配权限
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleOpenEditDialog(row.id)"
                  >
                    <i class="el-icon-setting" />
                    编辑
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    :disabled="!$checkPermission('point-del')"
                    @click="handleDel(row.id)"
                  >
                    <i class="el-icon-delete" />
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-pagination
              :current-page="query.page"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="query.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <!-- 新增角色框 -->
            <el-dialog
              title="新增角色"
              :visible="showAddDialog"
              @close="handleAddDialogClose"
            >
              <el-form label-width="80px">
                <el-form-item label="角色名称">
                  <el-input
                    v-model="roleForm.name"
                    placeholder="请输入角色名称"
                  />
                </el-form-item>
                <el-form-item label="角色描述">
                  <el-input
                    v-model="roleForm.description"
                    placeholder="请输入角色描述"
                  />
                </el-form-item>
              </el-form>
              <template #footer>
                <el-button size="small" @click="handleAddDialogClose">
                  取消
                </el-button>
                <el-button type="primary" size="small" @click="handleAdd">
                  确定
                </el-button>
              </template>
            </el-dialog>
            <!-- 编辑角色框 -->
            <el-dialog
              title="编辑角色"
              :visible="showEditDialog"
              @close="handleEditDialogClose"
            >
              <el-form label-width="80px">
                <el-form-item label="角色名称">
                  <el-input
                    v-model="roleForm.name"
                    placeholder="请输入角色名称"
                  />
                </el-form-item>
                <el-form-item label="角色描述">
                  <el-input
                    v-model="roleForm.description"
                    placeholder="请输入角色描述"
                  />
                </el-form-item>
              </el-form>
              <template #footer>
                <el-button size="small" @click="handleEditDialogClose">
                  取消
                </el-button>
                <el-button type="primary" size="small" @click="handleEdit">
                  确定
                </el-button>
              </template>
            </el-dialog>

            <!-- 分配权限弹窗 -->
            <el-dialog
              title="分配权限"
              :visible="showAssignDialog"
              @close="handelAssignClose"
            >
              <!-- 树形结构 -->
              <el-tree
                ref="tree"
                :data="treeData"
                :props="{ label: 'name' }"
                show-checkbox
                default-expand-all
                check-strictly
                node-key="id"
              />
              <template #footer>
                <el-button @click="handelAssignClose"> 取消 </el-button>
                <el-button type="primary" @click="handelAssign">
                  确定
                </el-button>
              </template>
            </el-dialog>

            <!--  -->
          </el-tab-pane>
          <el-tab-pane label="公司信息" name="company">
            <!-- 警告信息 -->
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              show-icon
              :closable="false"
            />
            <!-- 表单 -->
            <el-form label-width="120px" style="margin-top: 50px">
              <el-form-item label="公司名称">
                <el-input
                  v-model="companyForm.name"
                  disabled
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input
                  v-model="companyForm.companyAddress"
                  disabled
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input
                  v-model="companyForm.mailbox"
                  disabled
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="companyForm.remarks"
                  type="textarea"
                  :rows="3"
                  disabled
                  style="width: 400px"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  getRoleListAPI,
  delRoleAPI,
  addRoleAPI,
  getRoleDetailAPI,
  editRoleAPI,
  getCompanyDetailAPI,
  resetAssignPerAPI
} from '@/api/settings'
import { getPrmListAPI } from '@/api/permission'
import { list2Tree } from '@/utils/list2tree'
export default {
  name: 'Settings',
  data() {
    return {
      // 树形数据
      treeData: {},
      // 控制分配权限弹框的显示
      showAssignDialog: false,
      // 收集激活的teb栏
      activeName: 'role',
      roleList: [],
      // 查询参数
      query: {
        page: 1, // 页码
        pagesize: 5 // 条数
      },
      // 数据总条数
      total: 0,
      // 控制新增角色弹框的显示
      showAddDialog: false,
      // 控制编辑角色弹框的显示
      showEditDialog: false,
      // 角色表单
      roleForm: {
        name: '', // 角色名称
        description: '' // 角色描述
      },
      //
      companyForm: {
        name: '',
        companyAddress: '',
        mailbox: '',
        remarks: ''
      }
    }
  },
  watch: {
    async activeName(newVal) {
      if (newVal !== 'company') return
      // 发请求获取公司信息
      if (this.companyForm.id) return
      const resp = await getCompanyDetailAPI(
        this.$store.state.user.userInfo.companyId
      )
      // 做回显
      this.companyForm = resp.data
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    // 分配权限
    async handelAssign() {
      try {
        // 获取树形组件选中的节点(表明要给当前角色分配的权限)
        const permIds = this.$refs.tree.getCheckedKeys()
        // 发起分配权限请求
        const resp = await resetAssignPerAPI(this.em.id, permIds)
        // console.log(resp)
        this.$message.success(resp.message)
      } catch (error) {
        console.log(error)
      } finally {
        this.handelAssignClose()
      }
    },
    // 分配权限弹窗打开
    async handleOpenAssignDialog(em) {
      // 保存角色id所在对象
      this.em = em
      // console.log(em)
      this.showAssignDialog = true
      // 获取权限列表
      const resp = await getPrmListAPI()
      this.treeData = list2Tree(resp.data, '0')
      // console.log(resp)
      // 获取角色详情
      const awm = await getRoleDetailAPI(em.id)
      // console.log(awm)
      // 获取角色权限点数组
      const arr = awm.data.permIds
      // console.log(arr)
      // 保存角色权限数组
      this.permIds = arr
      // 角色权限回显
      this.$refs.tree.setCheckedKeys(arr)
    },
    // 分配权限弹窗关闭
    handelAssignClose() {
      this.showAssignDialog = false
      // 清空属性选中状态
      this.$refs.tree.setCheckedKeys([])
    },
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    // 获取所有角色列表
    async getRoleList() {
      const resp = await getRoleListAPI(this.query)
      // console.log(resp)
      const { rows, total } = resp.data
      this.roleList = rows
      this.total = total
    },
    // 条数变化
    handleSizeChange(val) {
      this.query.pagesize = val
      this.getRoleList()
    },
    // 页码变化
    handleCurrentChange(val) {
      // 把选择的页码同步到query中
      this.query.page = val
      // 获取角色列表列表
      this.getRoleList()
    },
    // 自定义下标序号
    indexMethod(index) {
      return index + 1 + this.query.pagesize * (this.query.page - 1)
    },
    // 删除角色
    async handleDel(id) {
      try {
        // console.log(id)
        // 询问
        await this.$confirm('此操作不可逆,确定删除么?', '提示', {
          type: 'warning'
        })
        // 发起删除请求
        await delRoleAPI(id)
        // 如果当前页面大于1，并且roleList中只有1条数据
        // 需要获取上一页的数据
        if (this.query.page > 1 && this.roleList.length === 1) {
          this.query.page--
        }
        // 获取角色列表
        this.getRoleList()
        // 成功提示
        this.$message.success('删除成功')
      } catch (error) {
        // 取消
        // console.log(error)
        error.message
          ? this.$message.error(error.message)
          : this.$message.info('已取消')
      }
    },
    // 新增角色
    async handleAdd() {
      // 整体校验
      // 发起新增请求
      await addRoleAPI(this.roleForm)
      // 关闭弹框
      this.handleAddDialogClose()
      // 获取角色列表
      this.getRoleList()
      this.$message.success('角色添加成功')
    },
    // 关闭新增角色弹框
    handleAddDialogClose() {
      this.showAddDialog = false
      Object.keys(this.roleForm).forEach((key) => {
        this.roleForm[key] = ''
      })
    },
    // 编辑角色弹框打开时
    async handleOpenEditDialog(roleId) {
      this.showEditDialog = true
      // 根据roleId获取角色详情做回显
      const resp = await getRoleDetailAPI(roleId)
      this.roleForm = resp.data
      // console.log(resp)
    },
    //  编辑角色
    async handleEdit() {
      try {
        // 整体校验
        // 发起编辑请求
        const resp = await editRoleAPI(this.roleForm)
        console.log(resp)
        // 关闭弹框
        this.handleEditDialogClose()
        // 获取角色列表
        this.getRoleList()
        // 修改成功提示
        this.$message.success('修改成功')
      } catch (error) {
        if (error.message) this.$message.error(error)
      }
    },
    // 关闭编辑角色弹框
    handleEditDialogClose() {
      this.showEditDialog = false
      Object.keys(this.roleForm).forEach((key) => {
        this.roleForm[key] = ''
      })
    }
  }
}
</script>

<style scoped>
.el-pagination {
  margin-top: 15px;
}
</style>
